<template>
    <div>
        <div ref="myChart" style="margin:0 auto; width: 1000px; height: 600px"></div>
        <el-dialog title="专柜磅秤到期提醒" :visible.sync="counterListVisible" :close-on-click-modal="false">
            <el-table :data="counterList" border :default-sort="{ prop: 'name', order: 'ascending' }">
                <el-table-column prop="name" label="专柜名" sortable></el-table-column>
                <el-table-column prop="no" label="厂编" sortable></el-table-column>
                <el-table-column prop="begin" label="进场时间" sortable></el-table-column>
                <el-table-column prop="end" label="到期时间" sortable></el-table-column>
                <el-table-column prop="remark" label="备注" width="200" sortable></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="() => (counterListVisible = false)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import qs from 'qs'

export default {
    data() {
        return {
            counterListVisible: false,
            counterList: []
        }
    },
    computed: {
        role() {
            return this.$store.getters.user.role
        }
    },
    methods: {
        async couter() {
            if (this.role === 'AD' || this.role === 'EDP') {
                const res = await this.$http.get('/counterList', {
                    params: {
                        status: [2],
                        endEnd: dayjs()
                            .add(7, 'day')
                            .format('YYYY-MM-DD')
                    },
                    paramsSerializer: params => {
                        return qs.stringify(params, { arrayFormat: 'indices' })
                    }
                })
                if (res && res.code === 0) {
                    if (res.returnObject.count > 0) {
                        this.counterList = res.returnObject.rows
                        this.counterListVisible = true
                    }
                }
            }
        }
    },
    created() {
        // this.couter()
    },
    async mounted() {
        if (this.role === 'EDP') {
            const res = await this.$http.get('/getCountByCategory')
            if (res && res.code === 0) {
                // 基于准备好的dom，初始化echarts实例
                const myChart = this.$echarts.init(this.$refs.myChart)
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '设备统计',
                        subtext: '按类别',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: res.returnObject.map(v => v.type + ' ' + v.name)
                    },
                    series: [
                        {
                            name: '按类别',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: res.returnObject.map(v => {
                                return { value: v.value, name: v.type + ' ' + v.name }
                            }),
                            // [
                            //     { value: 335, name: '直接访问' },
                            //     { value: 310, name: '邮件营销' },
                            //     { value: 234, name: '联盟广告' },
                            //     { value: 135, name: '视频广告' },
                            //     { value: 1548, name: '搜索引擎' }
                            // ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            }
        }
    }
}
</script>
